body {
  background: linear-gradient(90deg, #fff, #bbb);
}

div {
  position: relative;
  width: 20vw;
  height: 8vw;
  margin: 1vw auto;
  border-radius: 1vmin;
  line-height: 8vw;
  color: #fff;
  text-align: center;
  //background: #e91e63;
}

.shadow {
  overflow: hidden;

  &::before {
    position: absolute;
    content: "";
    left: -2vw;
    top: -2vw;
    width: 4vw;
    height: 4vw;
    border-radius: 50%;
    box-shadow: 0 0 25vw #e91e63;
    z-index: -1;
    animation: shadow-move 10s infinite;
  }
}

.shadow2 {
  overflow: hidden;

  &::before {
    position: absolute;
    content: "";
    top: -2vw;
    left: -2vw;
    width: 4vw;
    height: 4vw;
    border-radius: 50%;
    box-shadow: 0 0 0 15vw #e91e63;
    z-index: -1;
  }

  &::after {
    position: absolute;
    content: "";
    bottom: -2vw;
    right: -2vw;
    width: 4vw;
    height: 4vw;
    border-radius: 50%;
    box-shadow: 0 0 0 15vw #e91e63;
    z-index: -1;
  }
}

.linear {
  overflow: hidden;
  background-size: 100%;
  background-image: radial-gradient(circle at 0 0, transparent 0, transparent 2vw, #03A9F5 2vw);
}

.linear2 {
  overflow: hidden;
  background-size: 70% 70%;
  background-image: radial-gradient(circle at 100% 100%, transparent 0, transparent 2vw, #03A9F5 2vw),
  radial-gradient(circle at 0 0, transparent 0, transparent 2vw, #03A9F5 2vw),
  radial-gradient(circle at 100% 0, transparent 0, transparent 2vw, #03A9F5 2vw),
  radial-gradient(circle at 0 100%, transparent 0, transparent 2vw, #03A9F5 2vw);
  background-repeat: no-repeat;
  background-position: right bottom, left top, right top, left bottom;
}

@keyframes shadow-move {
  0% {
    background: #e91e63;
    box-shadow: 0 0 0 0 #e91e63;
  }
  10% {
    background: transparent;
    box-shadow: 0 0 0 0 #e91e63;
  }
  50% {
    background: transparent;
    box-shadow: 0 0 0 25vw #e91e63;
  }
}
